<!--
 * @Author: daidai
 * @Date: 2022-03-01 15:51:43
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-29 15:12:46
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-bottom.vue
-->
<template>
  <div class="right_bottom">
    <!-- <dv-capsule-chart :config="config" style="width:100%;height:260px" /> -->
    <Echart id="rightCenter" :options="options" class="right_center_inner" ref="charts"   height="260px" />
  </div>
</template>

<script>
import { currentGET } from 'api/modules'
import * as API from '@/api'
export default {
  data() {
    return {
       options: {},
      countBateryNumData: {
        risk: 0,
        store:0,
        use: 0
      },
      pageflag: true,
      timer: null,
      autoTime: 6 * 60 * 1000
    };
  },
  created() {
    this.getData()

  },
  computed: {
  },
  mounted() {
    this.switper()
  },
  beforeDestroy() {
    this.clearData()
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },

    getData() {
      this.pageflag = true

      // this.countBateryNumData = {
      //   "use": 2000,
      //   "store": 814,
      //   "stock": 16,
      //   "risk": 238
      // }
      // this.$nextTick(() => {
      //       this.init()
      //     })
      // return
      API.GET('/super/screen/battery_stat').then(res => {
        if(res.code === 1){
          this.countBateryNumData = {...res.data}
          this.$nextTick(() => {
            this.init()
          })
        } else {
          this.pageflag = false
        }
      })
    },
    //轮询
    switper() {
      if (this.timer) {
        return
      }
      let looper = (a) => {
        this.getData()
      };
      this.timer = setInterval(looper, this.autoTime);
      let myChart = this.$refs.charts.chart
      myChart.on('mouseover', params => {
        this.clearData()
      });
      myChart.on('mouseout', params => {
        this.timer = setInterval(looper, this.autoTime);
      });
    },
    init() {
      const { risk , store , use, stock } = this.countBateryNumData
      let total = risk + store + use + stock
      this.options = {
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
        },
        graphic: [
          {
            type: 'image',
            style: {
              image: require('@/assets/img/battery.png'), // 你的图片地址
              width: 48,
              height: 48,
              color: '#fff'
            },
            left: '21%',
            top: '40%',

          },

          // {
          //   type: 'text',
          //   left: 'center',
          //   top: '55%',
          //   style: {
          //     text: '疫情监测',
          //     fill: '#fff',
          //     width: 30,
          //     height: 30,
          //     fontSize: 20
          //   }
          // }
        ],
        legend: {
          show: true,
          right: '5%',
          top: '30%',
          orient: 'vertical',
          textStyle: {
            color: '#fff',
            fontSize: 16,
          },
          formatter: function (name) {

            let text = ''
            if(name === '在租'){
              text = name + '  ' + (use / total * 100).toFixed(2) + '%   ' + use
            } else if(name === '在柜') {
              text = name + '  ' + (store / total * 100).toFixed(2) + '%   ' + store
            } else if(name === '仓库') {
              text = name + '  ' + (stock / total * 100).toFixed(2) + '%   ' + stock
            }else if(name === '风险') {
              text = name + '  ' + (risk / total * 100).toFixed(2) + '%   ' + risk
            }
            return text;
          },
        },
        series: [
          {
            name: '电池统计',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['26%', '50%'],
            avoidLabelOverlap: false,
            padAngle: 5,
            minAngle: 10,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: use, name: '在租' },
              { value: store, name: '在柜' },
              { value: stock, name: '仓库' },
              { value: risk, name: '风险', itemStyle: { color: 'rgb(176, 58, 91)' }},
            ],
            itemStyle: {
              borderRadius: 10
            },
          }
        ]
      };
    },
  },
};
</script>
<style lang='scss' scoped>
.list_Wrap {
  height: 100%;
  overflow: hidden;
  :deep(.kong)   {
    width: auto;
  }
}

.sbtxSwiperclass {
  .img_wrap {
    overflow-x: auto;
  }

}

.right_bottom {
  box-sizing: border-box;
  padding: 0 16px;
  .noData {
    width: 100%;
    line-height: 100px;
    text-align: center;
    color: rgb(129, 128, 128);

  }
}
</style>
